<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>食物列表页面</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <script src="/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="main">
    <ul>
        <!--        循环这个东东就可以了-->
        <c:forEach items="${food}" var="fd">
            <li>

                <div class="picture">
                    <img src="img/jd.jpg" name="foodpic">
                </div>
                <div hidden="hidden" name="fid">
                        ${fd.id}
                </div>
                <!--            食物名称-->
                <div class="food-name">
                        ${fd.foodname}
                </div>
                <!--            食物价格-->
                <p class="price"><span>${fd.price}</span>元/份</p>
                <p class="order-btn">
                    <button class="layui-btn layui-btn-sm" style="background-color: red;" value="${fd.id}"
                            name="or_btn">点我订餐
                    </button>
                </p>
            </li>
        </c:forEach>
    </ul>
</div>
</body>
<style>
    .main ul li{
        margin-right: 7px;
        margin-bottom: 9px;
        width: 200px;
        height: 315px;
        background-color: #8e8888;
    }
    .main ul{
        margin: 0;
        padding: 0;
        display:flex;
        flex-wrap:wrap
    }

    .main {
        float: left;
    }
    .food-name{
        font-size: 16px;
        margin-left: 20px;
    }
    .order-btn{
        text-align: center;
    }
    .price{
        margin-top: 13px;
    }
    .picture img:hover{
        cursor: pointer;
    }
    .price span{
        color: red;
        text-align: left;
        margin-left: 20px;
        margin-top: 10px;
        margin-bottom: 5px;
    }
    .picture{
        height: 70%;
    }
    .picture img{
        width: 100%;
        height: 100%;
    }
</style>
</html>
<script>
    //引用layui的弹出层
    layui.use('layer', function(){
        var layer = layui.layer;
    });
    //点击图片，弹出食物信息
    $("img[name='foodpic']").click(function (){
        //拿到食物ID
        let id = $(this).parent().next().text();
        // alert("食物的ID"+id);
        var X = $(this).offset().top;  //获取当前元素x坐标
        var Y = $(this).offset().left; //获取当前元素y坐标
        //弹出对话框，显示食物的详细信息
        layer.open({
            type: 2,
            title: '食物的详情页面',
            shadeClose: true,
            shade: 0.8,
            offset: 'auto',
            area: ['90%', '60%'],
            content: '/food/detail?foodid='+id //iframe的url,请求食物详情页面。
        })
    });

    //将参数发给父页面，父页面请求
    $("button[name='or_btn']").click(function () {
        let val = $(this).val();
        // window.location.href="/food/addcar?foodid="+val+'';

        // 自定义对象
        var msg = {
            value: '我是子页面传过来的参数,食物ID='+val+'',
            foodid:val
        };
        // 传参给父页面
        window.parent.postMessage(JSON.stringify(msg),'*');

    });
    /**
     * 触发事件，传参给父页面
     */
    function toParent() {
        // 自定义对象
        var obj = {
            value: '我是子页面传过来的参数'
        };
        // 传参给父页面
        window.parent.postMessage(JSON.stringify(obj),'*');
    };
</script>
